<template>
  <div>
    <el-form :model="tableData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-card class="box-card">
        <span>基本信息</span>
        <div class="text item">
          <el-form-item label="订单号">
            <el-input v-model="tableData.order.orderNumber" disabled></el-input>
          </el-form-item>
          <el-form-item label="申请时间" >
            <el-input :value="getDate(tableData.order.addTime)" disabled></el-input>
          </el-form-item>

          <el-form-item label="订单状态" >
            <el-input v-model="tableData.order.statusString" disabled></el-input>
          </el-form-item>
          <el-form-item label="汽车总数量">
            <el-input v-model="tableData.order.carSumNumber" disabled></el-input>
          </el-form-item>
          <el-form-item label="融资经销商" >
            <el-input v-model="tableData.order.dealerName" disabled></el-input>
          </el-form-item>
        
          <el-form-item label="融资总金额(元)" >
            <el-input :value="tableData.order.mortgageSumMoney| toFixed2" disabled></el-input>
            <span class="convertCurrency">{{tableData.order.mortgageSumMoney|convertCurrency}}</span>
          </el-form-item>
        
          <el-form-item label="收款账户名" prop="desc">
            <el-input v-model="tableData.order.accountName" disabled placeholder="限制30字"></el-input>
          </el-form-item>
          <el-form-item label="收款账号" prop="desc">
            <el-input v-model="tableData.order.accountNumber" disabled placeholder="限制30字"></el-input>
          </el-form-item>
          <el-form-item label="开户行" prop="desc">
            <el-input v-model="tableData.order.openningBank" disabled placeholder="限制30字"></el-input>
          </el-form-item>
        </div>
      </el-card>
      <br>
      <br>
      <el-card>
        <span>付款信息</span>
        <el-form-item label="付款凭证" required>
          <qiniu :qiniuImage="tableData.detail.payPics" :id="tableData.detail.payPics.id" :canDelete="false"></qiniu>
        </el-form-item>
        <el-form-item label="付款金额">
          <el-input :value="tableData.detail.payMoney| toFixed2" disabled></el-input>
           <span class="convertCurrency">{{tableData.detail.payMoney|convertCurrency}}</span>
        </el-form-item>
        <el-form-item label="付款备注">
          <el-input v-model="tableData.detail.remark" disabled></el-input>
        </el-form-item>
        <el-form-item label="经手人" >
          <el-input v-model="tableData.detail.handling" disabled></el-input>
        </el-form-item>
        <el-form-item label="付款时间" >
          <el-input :value="getDate(tableData.detail.payDate)" disabled></el-input>
        </el-form-item>
        <el-form-item label="银行流水编号" >
          <el-input v-model="tableData.detail.bankTransaction" disabled></el-input>
        </el-form-item>
        <el-form-item label="付款单审核" prop="radio">
          <el-radio v-model="tableData.radio" label="1">通过</el-radio>
          <el-radio v-model="tableData.radio" label="2">不通过</el-radio>
        </el-form-item>
        <el-form-item label="付款单审核备注" prop="detail.checkRemark">
            <el-input v-model="tableData.detail.checkRemark" :maxlength='30' placeholder="限制30字"></el-input>
          </el-form-item>
           <el-form-item label="付款单审核人" prop="desc">
            <el-input v-model="tableData.detail.checkPerson" disabled></el-input>
          </el-form-item>
           <el-form-item label="付款单审核时间" prop="desc">
            <el-input v-model="tableData.detail.checkTime" disabled></el-input>
          </el-form-item>

      </el-card>
      <el-form-item class='align'>
        <el-button type="primary" @click="resetForm('ruleForm')">返回</el-button>
        <el-button type="success" @click="submitForm('ruleForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import qiniu from '@/views/qiniu/upload';
    import {
    require,
    prop,
    decimalTwo
  } from '@/utils/rules.js' //表单验证规则
  import {
    timestampToTime
  } from '@/utils/index.js'

  import agentHttp from '@/utils/agentHttp.js'
  export default {
    data() {
      return {
        tableData:{
          radio:'',
        },
        ruleForm: {
          name: "",
          region: "",
          date1: "",
          date2: "",
          delivery: false,
          type: [],
          resource: "",
          desc: ""
        },
        rules: {
         'detail.checkRemark':[require("收款账户名"),],
          radio: [require("付款单审核备注")]
        },
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
          const params = {}
           params.id=this.id;
           params.isPass = this.tableData.radio==1?true:false;
           params.checkRemark = this.tableData.detail.checkRemark ;
            agentHttp.put(`adminApi/admin/mortgage_order_remit/auditing`,params).then((res) => {
                if (res.success) {
                      this.dialogSendData.dialogFormVisible = false;
                      this.$message.success(res.data||"审核成功");
                      this.$emit('Refresh',null);
                }
        })

          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      resetForm(formName) {
        this.dialogSendData.dialogFormVisible = false;

        this.$refs[formName].resetFields();
      },
      initData() { //初始化数据

        agentHttp.get(`adminApi/admin/mortgage_order_remit/view/${this.carOrderId}/${this.id}`).then((res) => {
          if (res.success) {
            this.tableData = Object.assign({}, res.data, this.tableData);
             //处理青牛字段
             this.tableData.detail.payPics = {
                  id:'this.tableData.detail.payPic',
                  image_uri: this.tableData.detail.payPic.split(',').notempty() 
             }
          }
        })
      },
      getDate(time){
      return timestampToTime(time)
    }
    },
    props: {
      dialogSendData: {
        type: Object
      },
      id:{
        type:Number
      },
      carOrderId:{
        type:Number
      }
    },
    mounted() {
   
      this.initData();
    },
    components: {
      qiniu
    },
    
  };

</script>

<style lang="scss" scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    margin-top: 20px;
  }

  .align {
    margin: 50px auto 0;
    text-align: center;
  }

</style>

